<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>学生信息</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/css/layui.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/layui.js"></script>
</head>
<body>
<div class="layui-container">
    <h1>学生信息列表</h1>

    <!-- 查询区域 -->
    <div class="layui-form-inline">
        <input type="text" id="search-name" placeholder="姓名" class="layui-input" style="width: 200px; display: inline-block;">
        <input type="text" id="search-studentNumber" placeholder="学号" class="layui-input" style="width: 200px; display: inline-block;">
        <button class="layui-btn layui-btn-danger" onclick="searchStudents(0)">查询</button>
    </div>

    <!-- 添加学生按钮 -->
    <button class="layui-btn layui-btn-normal" onclick="addStudent()">添加学生</button>

    <!-- 学生信息表格 -->
    <table class="layui-table" id="student-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>专业</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="student-body">
        <!-- 数据通过AJAX渲染 -->
        </tbody>
    </table>

    <!-- 分页控件 -->
    <div id="pagination" class="layui-box layui-laypage layui-laypage-default" style="text-align: center;"></div>

</div>

<!-- 添加/编辑学生的弹窗 -->
<div id="student-form" class="layui-form" style="display:none;">
    <form class="layui-form" id="form-student">
        <input type="hidden" id="student-id">
        <div class="layui-form-item">
            <label class="layui-form-label">学号</label>
            <div class="layui-input-block">
                <input type="text" id="studentNumber" name="studentNumber" required lay-verify="required" placeholder="请输入学号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" id="studentName" name="studentName" required lay-verify="required" placeholder="请输入姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="number" id="studentAge" name="studentAge" required lay-verify="required" placeholder="请输入年龄" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专业</label>
            <div class="layui-input-block">
                <input type="text" id="studentMajor" name="studentMajor" required lay-verify="required" placeholder="请输入专业" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" onclick="saveStudent()">保存</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="closeForm()">取消</button>
            </div>
        </div>
    </form>
</div>

<script src="/js/student.js"></script>
<script>
    let currentPage = 0;
    let pageSize = 10;

    // 加载学生数据
    function loadStudents() {
        $.ajax({
            url: `/students/ajax?page=${currentPage}&size=${pageSize}`,
            method: 'GET',
            success: function(response) {
                renderStudents(response.content);
                renderPagination(response.totalPages, currentPage);
            }
        });
    }

    // 根据姓名或学号查询学生数据
    function searchStudents(page) {
        currentPage = page;
        const name = $('#search-name').val();
        const studentNumber = $('#search-studentNumber').val();
        $.ajax({
            url: `/students/search?name=${name}&studentNumber=${studentNumber}&page=${currentPage}&size=${pageSize}`,
            method: 'GET',
            success: function(response) {
                renderStudents(response.content);
                renderPagination(response.totalPages, currentPage);
            }
        });
    }

    // 渲染学生表格
    function renderStudents(students) {
        const studentBody = $('#student-body');
        studentBody.empty();
        students.forEach(student => {
            studentBody.append(`
                <tr>
                    <td>${student.id}</td>
                    <td>${student.studentNumber}</td>
                    <td>${student.name}</td>
                    <td>${student.age}</td>
                    <td>${student.major}</td>
                    <td>
                        <button class="layui-btn layui-btn-xs" onclick="editStudent(${student.id})">编辑</button>
                        <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteStudent(${student.id})">删除</button>
                    </td>
                </tr>
            `);
        });
    }

    // 渲染分页控件
    function renderPagination(totalPages, currentPage) {
        const pagination = $('#pagination');
        pagination.empty();
        if (totalPages > 1) {
            for (let i = 0; i < totalPages; i++) {
                pagination.append(`
                    <a href="javascript:void(0);" class="layui-laypage-item ${i === currentPage ? 'layui-laypage-curr' : ''}" onclick="loadPage(${i})">${i + 1}</a>
                `);
            }
        }
    }

    // 切换到指定页
    function loadPage(page) {
        currentPage = page;
        loadStudents();
    }

    // 打开添加学生表单
    function addStudent() {
        $('#student-form').show();
    }

    // 保存学生信息（添加/编辑）
    function saveStudent() {
        const student = {
            id: $('#student-id').val(),
            studentNumber: $('#studentNumber').val(),
            name: $('#studentName').val(),
            age: $('#studentAge').val(),
            major: $('#studentMajor').val(),
        };
        const method = student.id ? 'PUT' : 'POST';
        const url = student.id ? `/students/${student.id}` : '/students';

        $.ajax({
            url: url,
            method: method,
            data: JSON.stringify(student),
            contentType: 'application/json',
            success: function() {
                loadStudents();
                closeForm();
            }
        });
    }

    // 关闭表单
    function closeForm() {
        $('#student-form').hide();
    }

    // 编辑学生信息
    function editStudent(id) {
        $.ajax({
            url: `/students/${id}`,
            method: 'GET',
            success: function(student) {
                $('#student-id').val(student.id);
                $('#studentNumber').val(student.studentNumber);
                $('#studentName').val(student.name);
                $('#studentAge').val(student.age);
                $('#studentMajor').val(student.major);
                $('#student-form').show();
            }
        });
    }

    // 删除学生
    function deleteStudent(id) {
        $.ajax({
            url: `/students/${id}`,
            method: 'DELETE',
            success: function() {
                loadStudents();
            }
        });
    }

    // 初始化加载数据
    $(document).ready(function() {
        loadStudents();
    });
</script>
</body>
</html>
